<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!--支持响应式 禁用缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--支持响应式 禁用缩放-->
    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">-->
    <!--菜鸟教程关于media https://www.runoob.com/cssref/css3-pr-mediaquery.html-->
    <title>Three.js Cube Demo</title>
    <style>
        /*调整尺寸*/
        /*电脑*/
        @media (min-width: 768px) {
            #tzcc {
                position: absolute;
                bottom: 5%;
                right: 5%;
                font-size: 15px;
                padding-left: 5px
            }
        }

        /*手机*/
        @media (max-width: 767px) {
            #tzcc {
                position: absolute;
                bottom: 2%;
                right: 0%;
                font-size: 15px;
                padding-left: 5px
            }
        }


        /*注意事项*/
        /*电脑*/
        @media (min-width: 768px) {
            #zysx {
                position: absolute;
                bottom: 10%;
                right: 5%;
                font-size: 15px;
                padding-left: 5px
            }
        }

        /*手机*/
        @media (max-width: 767px) {
            #zysx {
                position: absolute;
                bottom: 9%;
                right: 0%;
                font-size: 15px;
                padding-left: 5px
            }
        }




        /*查看尺寸*/
        /*电脑*/
        @media (min-width: 768px) {
            #resultCkcc {
                position: absolute;
                bottom: 15%;
                right: 5%;
                font-size: 15px;
                padding-left: 5px
            }
        }

        /*手机*/
        @media (max-width: 767px) {
            #resultCkcc {
                position: absolute;
                bottom: 16%;
                right: 0%;
                font-size: 15px;
                padding-left: 5px
            }
        }

        /*超链接*/
        @media (min-width: 768px) {
            #clj {
                position: absolute;
                top: 10%;
                left: 5%;
                font-size: 15px;
                padding-left: 5px;
            }
        }

        @media (max-width: 767px) {
            #clj {
                position: absolute;
                top: 0%;
                left: -1%;
                font-size: 15px;
                padding-left: 5px;
            }
        }

        /*输入长宽高*/
        @media (min-width: 768px) {
            #srk {
                width: 500px;
                color: black;
                font-size: 15px;
                padding-left: 5px;
            }
        }

        @media (max-width: 767px) {
            #srk {
                width: 100%;
                color: black;
                font-size: 15px;
                padding-left: 5px;
            }
        }

        /*背景图片*/
        @media (min-width: 768px) {
            body {
                margin: 0;
                overflow: hidden;
                background-image: url("b.jpg");
                background-repeat: no-repeat;
                background-size: cover;
            }
        }

        @media (max-width: 767px) {
            body {
                margin: 0;
                overflow: hidden;
                background-image: url('a.jpg');
                background-repeat: no-repeat;
                background-size: cover;
            }
        }

        canvas {
            display: block;
        }

        .input-group {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
    </style>
    <script src="js/jquery-3.6.0.min.js"></script>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/three.min.js"></script>
    <script src="js/clipboard.min.js"></script>


</head>
<!--<body  onload="youRequest(),suningAPI(),getDateTime()">-->
<body>
<!--
<div id="just" style="color: white">
    <h2>模型构建中... ...</h2>
    <h3>如果验证码错误将需要重新输入</h3>
</div>-->

<div id="jx" class="container-fluid" >
    <div style="margin-left: 100px">
        <span id="span1" style='color: white'></span>
        <span id="span2" style='color: white'></span>
    </div>


    <div id="mx" style="position: absolute;top: 40%;left: 50%;transform: translate(-50%, -50%);">

    </div>
    <!--超链接-->
    <div id="clj">
        <!-- Single button -->
        <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
                    aria-expanded="false">
                了解更多<span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="www.leyibai.com">官网地址</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>
    </div>

    <!--调整尺寸-->
    <div id="tzcc">
        <!-- Button trigger modal -->
        <button id="tzcc1"  type="button" class="btn btn-success btn-lg" data-toggle="modal"
                data-target="#myModal2">
            调整模型尺寸
        </button>

        <!-- Modal -->
        <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" >
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel2">调整模型尺寸</h4>
                    </div>
                    <div class="modal-body" >
                        <div id="srk" >
                            <h4>请输入模型尺寸:</h4>
                            <div class="input-group" >
                                <div class="input-group">
                                    <label for="depth"><span style="color: Green">长:&nbsp&nbsp&nbsp</span></label>
                                    <input type="number" id=depth name=depth value="30"
                                           oninput="value=value.replace(/(^\.|[^\d\.])/g,''). replace('.','$#$').replace(/\./g,'').replace('$#$','.').replace(/^([^1])(\d)\d*/, '$1$2').replace(/^1\d{2,}.*/,'120')">
                                    cm
                                    <input type="range" id="depth-range" min="0" max="120" value="30">
                                </div>
                                <label for="width"><span style="color: red">宽:&nbsp&nbsp&nbsp </span></label>
                                <input type="number" id=width name=width value="30"
                                       oninput="value=value.replace(/(^\.|[^\d\.])/g,''). replace('.','$#$').replace(/\./g,'').replace('$#$','.').replace(/^([^1])(\d)\d*/, '$1$2').replace(/^1\d{2,}.*/,'120')">
                                cm
                                <input type="range" id="width-range" min="0" max="120" value="30">
                            </div>
                            <div class="input-group">
                                <label for="height"><span style="color: Yellow">高:&nbsp&nbsp&nbsp </span></label>
                                <input type="number" id=height name=height value="50"
                                       oninput="value=value.replace(/(^\.|[^\d\.])/g,''). replace('.','$#$').replace(/\./g,'').replace('$#$','.').replace(/^([^1])(\d)\d*/, '$1$2').replace(/^1\d{2,}.*/,'120')">
                                cm
                                <input type="range" id="height-range" min="0" max="120" value="50">
                            </div>

                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--注意事项-->
    <div id="zysx">
        <!-- Button trigger modal -->
        <button  id="zysx1"  type="button" class="btn btn-success btn-lg" data-toggle="modal"
                data-target="#myModal1">
            注意事项
        </button>

        <!-- Modal -->
        <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel1">注意事项</h4>
                    </div>
                    <div class="modal-body" >
                        1.盒子尺寸默认是盒子的内部空间尺寸长宽高，如果加上外径，盒子的外部空间尺寸会比内部空间大1-1.5cm左右。<br>
                        2.如果用户的盒子是要放在封闭的空间如柜子里，那用户就要根据实际空间的尺寸谨慎选择盒子内部尺寸大小，避免出现盒子加大之后虽然可以放模型但盒子放不进去柜子的情况
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 确认结果 -->
    <div id="resultCkcc">
        <!-- Button trigger modal -->
        <button id="ckcc" onclick="showResult()" type="button" class="btn btn-success btn-lg" data-toggle="modal"
                data-target="#myModal">
            查看尺寸
        </button>

        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">尺寸</h4>
                    </div>
                    <div class="modal-body" id="resultId">
                        ...
                    </div>
                    <div class="modal-footer">
                        <button id="copyCc" type="button" class="btn btn-primary"  data-clipboard-target="#resultId">复制尺寸</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script>
        // 复制相关. 引入js ,复制尺寸按钮上面的data-clipboard-target属性 加上底下这段代码即可
        var clipboard = new ClipboardJS('#copyCc');
        clipboard.on('success', function(e) {
            alert("复制成功")
        });
        clipboard.on('error', function(e) {
            alert("复制失败")
        });


        const scaleFactor = 40;

        // 创建场景
        const scene = new THREE.Scene();

        // 创建相机 和光源
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);
        camera.position.z = 5;
        const light = new THREE.PointLight(0xffffff, 1.5, 100);
        light.position.set(0, 0, 10)
        scene.add(light);


        // 创建渲染器
        // 创建透明的渲染器
        const renderer = new THREE.WebGLRenderer({alpha: true});
        renderer.setClearColor(0x000000, 0); // 设置背景透明
        renderer.setClearAlpha(0);
        renderer.autoClear = true;
        renderer.autoClearColor = true;
        renderer.sortObjects = true;
        // renderer.domElement.style.position = 'absolute';
        renderer.domElement.style.zIndex = 1;
        // renderer.domElement.style.top = 0;
        // renderer.domElement.style.left = 0;
        renderer.domElement.style.pointerEvents = 'none';
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.getElementById("mx").appendChild(renderer.domElement);
        // document.body.appendChild(renderer.domElement);


        // 创建模型
        var width = document.getElementById('width').value;
        var height = document.getElementById('height').value;
        var depth = document.getElementById('depth').value;
        var geometry = new THREE.BoxGeometry(width / scaleFactor, height / scaleFactor, depth / scaleFactor);
        // 这个材质可以受光源影响
        var material = new THREE.MeshStandardMaterial({color: 0xffbf00});
        var cube = new THREE.Mesh(geometry, material);



        // 创建底座
        let base = createBase(cube)

        function createBase(cube) {
            // 创建一个线框和底座,基于模型的中心点和尺寸信息, 还有一个模型群组 这样可以让其一起移动
            // 获取模型的长宽高
            var bbox = new THREE.Box3().setFromObject(cube);
            bbox.expandByScalar(0.05); // 扩大bbox的尺寸0.5个单位 比线框大一点点
            var width1 = bbox.max.x - bbox.min.x;
            var height1 = bbox.max.y - bbox.min.y;
            var depth1 = bbox.max.z - bbox.min.z;

            var baseWidth = width1;
            var baseHeight = height1 *0.1 ;
            var baseDepth = depth1 ;
            var baseGeometry = new THREE.BoxGeometry(baseWidth, baseHeight, baseDepth);
            var baseMaterial = new THREE.MeshStandardMaterial({color: 0x58626b});
            var base = new THREE.Mesh(baseGeometry, baseMaterial);

            // 设置底座的位置 + (baseHeight / 2); 为了让其贴合模型
            base.position.x = cube.position.x;
            base.position.y = bbox.min.y + (baseHeight / 2);
            base.position.z = cube.position.z;
            return base;
        }


        // 创建线框和设置位置
        let frame = createFrame(cube);

        function createFrame(cube) {
            var bbox = new THREE.Box3().setFromObject(cube);
            // 扩大bbox0.2倍
            var originalBbox = bbox.clone(); // 复制原始bbox
            bbox.expandByScalar(0.04); // 扩大bbox的尺寸0.2个单位
            var width1 = bbox.max.x - bbox.min.x;
            var height1 = bbox.max.y - bbox.min.y;
            var depth1 = bbox.max.z - bbox.min.z;

            var frameGroup = new THREE.Group(); // 用于存放线框的群组

            // 创建12根线条并设置位置#FFFF00 + height1*0.05 线框藏在底座里面
            frameGroup.add(createFrameLine(0xff0000, [bbox.min.x, bbox.min.y + height1*0.05, bbox.min.z], [bbox.min.x + width1, bbox.min.y + height1*0.05, bbox.min.z])); // 红色线框 1
            frameGroup.add(createFrameLine(0xff0000, [bbox.min.x, bbox.max.y, bbox.min.z], [bbox.min.x + width1, bbox.max.y, bbox.min.z])); // 红色线框 2
            frameGroup.add(createFrameLine(0xff0000, [bbox.min.x, bbox.min.y + height1*0.05, bbox.max.z], [bbox.min.x + width1, bbox.min.y + height1*0.05, bbox.max.z])); // 红色线框 3
            frameGroup.add(createFrameLine(0xff0000, [bbox.min.x, bbox.max.y, bbox.max.z], [bbox.min.x + width1, bbox.max.y, bbox.max.z])); // 红色线框 4
            frameGroup.add(createFrameLine(0x00ff00, [bbox.min.x, bbox.min.y + height1*0.05, bbox.min.z], [bbox.min.x, bbox.min.y + height1*0.05, bbox.max.z])); // 绿色线框 1
            frameGroup.add(createFrameLine(0x00ff00, [bbox.min.x, bbox.max.y, bbox.min.z], [bbox.min.x, bbox.max.y, bbox.max.z])); // 绿色线框 2
            frameGroup.add(createFrameLine(0x00ff00, [bbox.max.x, bbox.min.y + height1*0.05, bbox.min.z], [bbox.max.x, bbox.min.y + height1*0.05, bbox.max.z])); // 绿色线框 3
            frameGroup.add(createFrameLine(0x00ff00, [bbox.max.x, bbox.max.y, bbox.min.z], [bbox.max.x, bbox.max.y, bbox.max.z])); // 绿色线框 4
            frameGroup.add(createFrameLine(0xFFFF00, [bbox.min.x, bbox.min.y + height1*0.05, bbox.min.z], [bbox.min.x, bbox.max.y, bbox.min.z])); // 黄色线框 1
            frameGroup.add(createFrameLine(0xFFFF00, [bbox.min.x, bbox.min.y + height1*0.05, bbox.max.z], [bbox.min.x, bbox.max.y, bbox.max.z])); // 黄色线框 2
            frameGroup.add(createFrameLine(0xFFFF00, [bbox.max.x, bbox.min.y + height1*0.05, bbox.min.z], [bbox.max.x, bbox.max.y, bbox.min.z])); // 黄色线框 3
            frameGroup.add(createFrameLine(0xFFFF00, [bbox.max.x, bbox.min.y + height1*0.05, bbox.max.z], [bbox.max.x, bbox.max.y , bbox.max.z])); // 黄色线框 4

            return frameGroup;
        }


        // 创建玻璃罩子
        let blzz = createBlzz(cube);
        function  createBlzz(cube){
            let bbox = new THREE.Box3().setFromObject(cube);
            bbox.expandByScalar(0.04); // 扩大bbox的尺寸0.2个单位
            var width1 = bbox.max.x - bbox.min.x;
            var height1 = bbox.max.y - bbox.min.y;
            var depth1 = bbox.max.z - bbox.min.z;
            var glassGeometry = new THREE.BoxGeometry(width1,height1, depth1);
            var glassMaterial = new THREE.MeshPhysicalMaterial({
                color: 0x00ffff,
                transparent: true,
                opacity: 0.8,
                roughness: 0.3, // 控制表面的粗糙度
                metalness: 0, // 控制表面的金属质感
                clearcoat: 1, // 控制表面的清漆层
                clearcoatRoughness: 0.1, // 控制清漆层的粗糙度
                envMapIntensity: 1, // 控制环境贴图的强度
                transmission: 0.7, // 控制透射率
                ior: 1.0 // 控制折射率
            });
            return new THREE.Mesh(glassGeometry, glassMaterial);
        }






        function createFrameLine(color, start, end) {
            var geometry = new THREE.BufferGeometry();
            var vertices = new Float32Array([
                start[0], start[1], start[2],
                end[0], end[1], end[2]
            ]);
            geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
            var material = new THREE.LineBasicMaterial({color: color, linewidth: 2});
            var line = new THREE.Line(geometry, material);
            return line;
        }

        //===================


        // 创建群组并且添加线框和底座让其一起移动
        var group = new THREE.Group();
        group.add(cube);
        group.add(base);
        group.add(frame);
        group.add(blzz);
        group.rotation.x += 0.01;
        group.rotation.y += 0.01;
        group.position.x += 0.1;


        // 模型群组添加了模型,线框和底座,  用场景把模型群组放进去,这样可以保持一起动,另外在底下的render方法
        // 可以把相机和场景传递给渲染器,进行渲染
        scene.add(group);


        // Add mousemove event listener to rotate the cube
        var isDragging = false;
        var previousMousePosition = {
            x: 0,
            y: 0
        };

        // 鼠标事件监听
        document.addEventListener('mousedown', onMouseDown, false);
        document.addEventListener('mouseup', onMouseUp, false);
        document.addEventListener('mousemove', onMouseMove, false);

        // 触摸事件监听
        document.addEventListener('touchstart', onTouchStart, false);
        document.addEventListener('touchmove', onTouchMove, false);
        document.addEventListener('touchend', onTouchEnd, false);


        function onMouseDown(event) {
            isDragging = true;
        }

        function onMouseUp(event) {
            isDragging = false;
        }

        function onMouseMove(event) {
            if (isDragging) {
                // 鼠标移动,根据模型群组移动, 之前是根据模型
                group.rotation.x += (event.clientY - previousMousePosition.y) * 0.01;
                group.rotation.y += (event.clientX - previousMousePosition.x) * 0.01;
            }
            previousMousePosition = {
                x: event.clientX,
                y: event.clientY
            };
        }

        function onTouchStart(event) {
            // event.preventDefault();
            isDragging = true;
            previousMousePosition = getTouchPosition(event);
        }

        function onTouchMove(event) {
            // event.preventDefault();
            if (isDragging) {
                var touchPosition = getTouchPosition(event);
                group.rotation.x += (touchPosition.y - previousMousePosition.y) * 0.01;
                group.rotation.y += (touchPosition.x - previousMousePosition.x) * 0.01;
                previousMousePosition = touchPosition;
            }
        }

        function onTouchEnd(event) {
            // event.preventDefault();
            isDragging = false;
        }

        function getTouchPosition(event) {
            var touch = event.touches[0];
            return {
                x: touch.clientX,
                y: touch.clientY
            };
        }


        // 跟新模型尺寸同步更新线框和底座
        function updateCubeSize() {
            /*此处为了修改外面result的大小*/
            width = document.getElementById('width').value;
            height = document.getElementById('height').value;
            depth = document.getElementById('depth').value;
            let width1 = document.getElementById('width').value / scaleFactor;
            let height1 = document.getElementById('height').value / scaleFactor;
            let depth1 = document.getElementById('depth').value / scaleFactor;

            // 移除旧的模型
            group.remove(cube);
            group.remove(base);
            group.remove(frame);
            group.remove(blzz);
            cube = new THREE.Mesh(new THREE.BoxGeometry(width1, height1, depth1), material);
            // 创建新的模型、线框和底座
            base = createBase(cube);
            frame = createFrame(cube);
            blzz = createBlzz(cube);
            // 添加新的模型、线框和底座
            group.add(cube);
            group.add(base);
            group.add(frame);
            group.add(blzz);
            // 重新计算线框和底座的尺寸和位置
            // frame.scale.set(1 + (0.01 * width), 1 + (0.01 * height), 1 + (0.01 * depth));
            // frame.position.set(cube.position.x, cube.position.y, cube.position.z);
            // base.scale.set(1 + (0.01 * width), 1, 1 + (0.01 * depth));
            // base.position.set(cube.position.x, cube.position.y - height / 2 - 0.01, cube.position.z);

            //----------------Just begin
            let span1 = document.getElementById("span1");
            let span2 = document.getElementById("span2");
            span1.innerHTML = "<h5>模型尺寸: 长" + depth +"厘米 / 宽" + width + "厘米 / 高" + height + "厘米<h5>";
            let d = parseInt(depth) + 3;
            let w = parseInt(width) + 3;
            let h = parseInt(height) + 2;
            span2.innerHTML = "<h5>推荐<span style='color: red'>最小</span>盒子尺寸: 长" + d +"厘米 / 宽" + w + "厘米 / 高" + h + "厘米<h5>";
            //----------------Just end

        }

        //输入框js
        const widthInput = document.getElementById('width');
        const heightInput = document.getElementById('height');
        const depthInput = document.getElementById('depth');
        const widthRange = document.getElementById('width-range');
        const heightRange = document.getElementById('height-range');
        const depthRange = document.getElementById('depth-range');
        const myModal = document.getElementById('myModal');

        // Listen for input events on the input elements
        widthInput.addEventListener('input', updateCubeSize);
        heightInput.addEventListener('input', updateCubeSize);
        depthInput.addEventListener('input', updateCubeSize);
        widthRange.addEventListener('input', changeWidth);
        heightRange.addEventListener('input', changeHeight);
        depthRange.addEventListener('input', changeDepth);
        // 禁用复制尺寸时 模型旋转 - 手机

        myModal.addEventListener('touchstart', function (event) {
            event.stopPropagation(); // 阻止事件冒泡
        }, false);
        myModal.addEventListener('touchend', function (event) {
            event.stopPropagation(); // 阻止事件冒泡
        }, false);


        // 禁用拖动进度条时 模型旋转 - 手机
        widthRange.addEventListener('touchstart', function (event) {
            event.stopPropagation(); // 阻止事件冒泡
        }, false);
        widthRange.addEventListener('touchend', function (event) {
            event.stopPropagation(); // 阻止事件冒泡
        }, false);
        heightRange.addEventListener('touchstart', function (event) {
            event.stopPropagation(); // 阻止事件冒泡
        }, false);
        heightRange.addEventListener('touchend', function (event) {
            event.stopPropagation(); // 阻止事件冒泡
        }, false);
        depthRange.addEventListener('touchstart', function (event) {
            event.stopPropagation(); // 阻止事件冒泡
        }, false);
        depthRange.addEventListener('touchend', function (event) {
            event.stopPropagation(); // 阻止事件冒泡
        }, false);
        // 禁用拖动进度条时 模型旋转 - 电脑
        widthRange.addEventListener('mousedown', function (event) {
            event.stopPropagation();
        });
        heightRange.addEventListener('mousedown', function (event) {
            event.stopPropagation();
        });
        depthRange.addEventListener('mousedown', function (event) {
            event.stopPropagation();
        });


        function changeWidth() {
            widthInput.value = widthRange.value;
            updateCubeSize()
        }

        function changeHeight() {
            heightInput.value = heightRange.value;
            updateCubeSize()
        }

        function changeDepth() {
            depthInput.value = depthRange.value;
            updateCubeSize()
        }


        // 刷新动画
        function render() {
            requestAnimationFrame(render);
            renderer.render(scene, camera);
        }

        render();

        function showResult() {
            let hzWidth = parseInt(width) + 3;
            let hzHeight = parseInt(height) + 2;
            let hzDepth = parseInt(depth) + 3;
            let resultStr = "<p>模型尺寸: 长: " + depth + "厘米,宽: " + width + "厘米,高: " + height + "厘米 </p><p> 盒子尺寸: 长: " + hzDepth + "厘米,宽: " + hzWidth + "厘米,高: " + hzHeight + "厘米</p>"
            $("#resultId").html(resultStr);
        }



        //---Just Begin--------------------------------------------------

        //当前的网络时间
        let dateTime = null;    //时间长串，需截取后才能用
        let dateTimeStr = null; //2052-05-20 20:47:07
        let youCode = null;     //带过来的验证码

        //解析请求，拆分验证码youCode
        function youRequest() {
            let e = document.getElementById("jx");
            e.style.display = "none";

            let url = location.search;
            let arr = url.split("=");
            youCode = url.split("=")[arr.length-1];
            youCode = eval((youCode)/1357);
        }

        //----------------------------
        //用于从网络获取当前时间，该开放的API由苏宁提供，服务不是很稳定，所以调用时可能需要多次调用
        function suningAPI(){
            dateTime = null;
            dateTimeStr = null;
            let httpRequest = new XMLHttpRequest();
            httpRequest.open('GET', 'https://quan.suning.com/getSysTime.do', true);
            httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            httpRequest.send(null);
            httpRequest.onreadystatechange = function () {
                if (httpRequest.readyState == 4 && httpRequest.status == 200) {
                    dateTime = httpRequest.responseText;
                }
            };
        }

        //---
        //count : 轮询4次(2秒)查看dateTime是否有值，如果无值，就再次调用suningAPI()向服务器发请求
        //myTime: 定时器，请求到时间后需要清除定时器
        let count = 0;
        let myTimer = null;
        function getDateTime() {
            myTimer = window.setTimeout(getDateTime, 500);//调用自己
            count++;
            if(count>=4){
                suningAPI();
                count = 0;
            }
            if (dateTime != null) {
                dateTimeStr = dateTime.toString().split('"')[3];
                window.clearTimeout(myTimer);
                checkCode(); //至此，已经成功获取到了网络时间
            }
        }

        //---------------------------- dateTimeStr
        function checkCode(){
            let args01 = dateTimeStr.split(" ")[0].split("-")[0];//年
            let args02 = dateTimeStr.split(" ")[0].split("-")[1];//月
            let args03 = dateTimeStr.split(" ")[0].split("-")[2];//日
            let args04 = dateTimeStr.split(" ")[1].split(":")[0];//时
            let args05 = dateTimeStr.split(" ")[1].split(":")[1];//分

            let sum = args01 * (args02 + args03 + args04 + Math.floor(args05/3));
            let myCode = (1000+sum%9000);

            if(youCode != myCode){
                window.location.replace("Just.html");
            }else{
                let jx = document.getElementById("jx");
                jx.style.display = "block";

                let just = document.getElementById("just");
                just.style.display = "none";
            }
        }



        //---Just End--------------------------------------------------

    </script>
</div>
</body>
</html>
